<template>
    <div class="loginModel">
        <div class="headerTitle">
            <img src="../assets/fanhuijiantou.png" class="goBlack" alt="" v-if="isDark == 1" @click="goBlack">
            <img src="../assets/fanhuijiantou1.png" class="goBlack" alt="" v-if="isDark == 0" @click="goBlack">

        </div>
        <div class="loginSrModel">
            <div class="loginTitle">  {{ $t("login") }}</div>
            <div class="card">
                <div style="color: var(--tradeGL)" class="inputModel">
                    <input type="text" class="input" :placeholder="$t('qsr') + $t('account')">
                </div>
            </div>
            <div class="card">
                <div style="color: var(--tradeGL)" class="inputModel">
                    <input :type="type2" class="input" :placeholder="$t('qsr') + $t('password')">
                    <img src="../assets/htmal5icon8.png" class="icon" alt="" v-if="type2 == 'password' && isDark == 1"
                        @click="type2 = 'text'">
                    <img src="../assets/htmal5icon9.png" class="icon" alt="" v-if="type2 == 'text' && isDark == 1"
                        @click="type2 = 'password'">
                    <img src="../assets/htmal5icon08.png" class="icon" alt="" v-if="type2 == 'password' && isDark == 0"
                        @click="type2 = 'text'">
                    <img src="../assets/htmal5icon09.png" class="icon" alt="" v-if="type2 == 'text' && isDark == 0"
                        @click="type2 = 'password'">
                </div>
            </div>
            <div class="fixedBtnqr">
                {{ $t('qr') }}
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, defineEmits } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const isDark = ref(0)

const type2 = ref('password')

onMounted(() => {
    if (localStorage.getItem('isDark')) {
        isDark.value = localStorage.getItem('isDark')
    }
})
const goBlack = () => {
    router.go(-1)
}
</script>
<style lang="less" scoped>
.loginModel {
    height: calc(100vh - 50px);
    padding: 10px;
    box-sizing: border-box;

    .headerTitle {
        width: 100%;
        text-align: center;
        height: 28px;
        line-height: 28px;
      
        position: relative;
    }

    .loginSrModel {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80%;
        transform: translate(-50%, -50%);
        .loginTitle{
            color: var(--textColor);
            text-align: center;
            font-size:22px;
            margin-bottom: 30px;
        }
    }

    .card {
        padding: 10px;
        border-radius: 5px;

        .input {
            background: transparent;
            border: 0;
            width: 100%;
        }

    }

    .goBlack {
        top: 50%;
        transform: translate(0, -50%);
        left: 10px;
        width: 20px;
        height: 20px;
        position: absolute;

    }

    .fixedBtnqr {
        font-size: 13px;
        line-height: 13px;
        color: #fff;
        width: 60%;
        text-align: center;
        padding: 15px 0;
        background-color: #203b87;
        box-sizing: border-box;
        border-radius: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 80px auto 0;
    }

    .inputModel {
        width: 120%;
        position: relative;
        padding: 10px;
        border: 1px solid var(--homeCardBg);
        border-radius: 55px;
        transform: scale(0.8) translate(-12%);

        .icon {
            width: 25px;
            height: 25px;
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    }
}</style>